import { defineComponent, nextTick, PropType, inject } from "vue";
/* component */
import SmallCustom from "@src/component/business/BizChatPanel/chart/smallCustom.vue";
import Custom from "@src/component/business/BizChatPanel/chart/custom.vue";
import CardCom from "@src/component/business/BizChatPanel/chart/cardCom.vue";
/* scss */
import "@src/modules/setting/gpt/components/chart/index.scss";
/* type */
import type { GetRobotTextToReportResult } from "@src/modules/setting/gpt/types/chartT";
import { isFalsy } from "@src/util/type";
import { useDialog } from "@hooks/useDialog";
type echartT = "bar";
interface dimensionsT {
  displayName: string;
}
interface indexsT {
  indexName: string;
  axisName: "Y1" | "Y2";
}
interface dataConfingT {
  dimensions: dimensionsT[];
  indexs: indexsT[];
  choiceNumber: boolean;
  choiceLegend: boolean;
}
export default defineComponent({
  name: "ai-textToReports",
  props: {
    eData: {
      type: Array as PropType<GetRobotTextToReportResult[]>,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
  },
  setup(props, { slots, emit }) {
    
    const { showDialog, hideDialog, visible, changeVisible } = useDialog()
    // 接受父组件的数据并改变
    const echartOpenChange = inject('echartOpenChange')
    return {
      showDialog,
      hideDialog,
      changeVisible,
      visible,
      echartOpenChange
    }
    
  },
  data() {
    return {
      data: [] as GetRobotTextToReportResult[],
      echartType: "bar" as echartT,
      dataConfig: {
        dimensions: [],
        indexs: [],
        choiceNumber: true,
        choiceLegend: true,
      } as dataConfingT,
      echartComCount: 1,
      totalObj: {
        dimension: 0,
        index: 0,
      },
      chartType: 'bar' as echartT,
      // 切换全屏时 图表状态
      incomplete: false as Boolean,
    };
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        class: "ai-textToReports__dialog",
        ref: 'ChartDialog',
        props: {
          show: this.visible,
          title: this.title,
        },
        on: {
          'update:show': this.changeVisible
        }
      }
    },
    isShowCard(): boolean {
      return this.totalObj.dimension === 0;
    },
    isShowChart(): boolean {
      return isFalsy(this.isShowCard);
    }
  },
  created() {
    this.data = this.eData
  },
  watch: {
    data: {
      handler: 'updateListHandler',
      immediate: true
    }
  },
  methods: {
    updateListHandler() {
      this.dataConfig = {
        dimensions: [],
        indexs: [],
        choiceNumber: true,
        choiceLegend: true,
      };
      this.totalObj = {
        dimension: 0,
        index: 0,
      },
      this.totalCardAndNot(this.data);
      this.normHandler();
      nextTick(() => {
        this.echartComCount += 1;
      });
    },
    /**
     * @description 数据生成对应的dataConfig对象
     */
    normHandler() {
      this.data.forEach((item) => {
        if (item.type === "dimension") {
          this.dataConfig.dimensions.push({
            displayName: item.name,
          });
        }
        if (item.type === "index") {
          this.dataConfig.indexs.push({
            indexName: item.name,
            axisName: "Y1",
          });
        }
      });
    },
    /**
     * @description 统计指标/维度数据
     * @param list 源数据
     */
    totalCardAndNot(list: GetRobotTextToReportResult[]) {
      list.forEach((item) => {
        if (item.type === "dimension") {
          this.totalObj.dimension += 1;
        }
        if (item.type === "index") {
          this.totalObj.index += 1;
        }
      });
    },
    onFullScreenHandler() {
      this.incomplete = true;
      this.showDialog();
      // @ts-ignore
      this.$refs.ChartDialog.isFullscreen = true;

    },
    /**
     * @description 关闭模态框处理函数
     */
    closeModalHandler() {
      this.incomplete = false;
    },
    renderFullScreen() {
      return (
        <div 
          class="ai-textToReports__fullScreen"
          onClick={this.onFullScreenHandler}
        >
          <i class="iconfont icon-quanping1"></i>
        </div>
      );
    },
    renderChart() {
      if (!this.echartOpenChange) {
        return 
      }
      return (
        <div class="ai-textToReports__chart">
          <SmallCustom
              data={this.data}
              dataConfig={this.dataConfig}
              chartType={this.chartType}
              redraw={this.echartComCount}
              doLayout={this.echartOpenChange}
            />
        </div>
      );
    },
    renderFullChart() {
      return (
        <div class="ai-textToReports__fullChart">
          <Custom
            data={this.data}
            dataConfig={this.dataConfig}
            chartType={this.chartType}
            redraw={this.echartComCount}
          />
        </div>
      )
    },
    renderCard() {
      return (
          <CardCom data={this.data} />
      );
    },
  },
  components: {
    SmallCustom,
    CardCom
  },
  render() {
    
    if (!this.data) {
      return null
    }
    
    return (
      <div>
        
        {this.isShowChart ? this.renderChart() : this.renderCard()}
        
        <base-modal {...this.attrs} onClose={this.closeModalHandler} >
          {this.incomplete ? this.renderFullChart() : ''}
        </base-modal>
        
      </div>
    )
  }
})
